<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Online CV - Professional HTML CSS Resume Website Template</title>

    <!-- favicon -->
    <link href="favicon.png" rel=icon>

    <!-- web-fonts -->
    <link href="https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700" rel="stylesheet">

    <!-- font-awesome -->
    <link href= “{{ url_for('static',filename='css/font-awesome.min.css') }}" rel="stylesheet">

    <!-- Bootstrap -->
    <link href="{{ url_for('static',filename='css/bootstrap.min.css') }}" rel="stylesheet">

    <!-- Style CSS -->
    <link href="{{ url_for('static',filename='css/style.css') }}" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar">
<div id="main-wrapper">
<!-- Page Preloader -->
<div id="preloader">
    <div id="status">
        <div class="status-mes"></div>
    </div>
</div>

<div class="columns-block">
<div class="left-col-block blocks">
    <header class="header">
        <div id="90b8a018c5734ffe92858f98909ffa27" class="chart-container" style="width:900px; height:500px;"></div>
    <script>
        var chart_90b8a018c5734ffe92858f98909ffa27 = echarts.init(
            document.getElementById('90b8a018c5734ffe92858f98909ffa27'), 'white', {renderer: 'canvas'});
        var option_90b8a018c5734ffe92858f98909ffa27 = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "color": [
        "blue",
        "green",
        "yellow",
        "red",
        "pink",
        "orange",
        "purple"
    ],
    "series": [
        {
            "type": "pie",
            "clockwise": true,
            "data": [
                {
                    "name": "\u5361\u901a\u52a8\u6f2b\u4eba\u7269",
                    "value": 337
                },
                {
                    "name": "\u5c4f\u5e55\u622a\u56fe",
                    "value": 30
                },
                {
                    "name": "\u52a8\u7269\u77e2\u91cf\u56fe",
                    "value": 3
                },
                {
                    "name": "\u52a8\u7269\u6f2b\u753b",
                    "value": 9
                },
                {
                    "name": "\u5723\u8bde\u8001\u516c\u516c",
                    "value": 2
                },
                {
                    "name": "\u5361\u901a\u56fe",
                    "value": 2
                },
                {
                    "name": "\u5de5\u7b14\u753b",
                    "value": 20
                },
                {
                    "name": "\u7ed8\u753b",
                    "value": 4
                },
                {
                    "name": "\u56fe\u753b",
                    "value": 13
                },
                {
                    "name": "\u7f8e\u5973",
                    "value": 5
                },
                {
                    "name": "\u7b80\u7b14\u753b",
                    "value": 61
                },
                {
                    "name": "\u8d85\u80fd\u529b\u9b54\u7f8e",
                    "value": 2
                },
                {
                    "name": "\u704c\u7bee\u5c11\u5e74",
                    "value": 6
                },
                {
                    "name": "\u884c\u653f\u533a\u5212\u56fe",
                    "value": 2
                },
                {
                    "name": "\u7b80\u7b14\u4eba\u7269",
                    "value": 2
                },
                {
                    "name": "\u7248\u753b",
                    "value": 6
                },
                {
                    "name": "\u80cc\u5305",
                    "value": 2
                },
                {
                    "name": "\u7eb8\u7248\u753b",
                    "value": 2
                },
                {
                    "name": "\u5305",
                    "value": 2
                },
                {
                    "name": "\u5176\u4ed6",
                    "value": 34
                }
            ],
            "radius": [
                "0%",
                "75%"
            ],
            "center": [
                "40%",
                "50%"
            ],
            "label": {
                "show": true,
                "position": "top",
                "margin": 8,
                "formatter": "{b}: {c}"
            },
            "rippleEffect": {
                "show": true,
                "brushType": "stroke",
                "scale": 2.5,
                "period": 4
            },
            "legend_opts": {
                "show": false,
                "padding": 5,
                "itemGap": 10,
                "itemWidth": 25,
                "itemHeight": 14
            }
        }
    ],
    "legend": [
        {
            "data": [
                "\u5361\u901a\u52a8\u6f2b\u4eba\u7269",
                "\u5c4f\u5e55\u622a\u56fe",
                "\u52a8\u7269\u77e2\u91cf\u56fe",
                "\u52a8\u7269\u6f2b\u753b",
                "\u5723\u8bde\u8001\u516c\u516c",
                "\u5361\u901a\u56fe",
                "\u5de5\u7b14\u753b",
                "\u7ed8\u753b",
                "\u56fe\u753b",
                "\u7f8e\u5973",
                "\u7b80\u7b14\u753b",
                "\u8d85\u80fd\u529b\u9b54\u7f8e",
                "\u704c\u7bee\u5c11\u5e74",
                "\u884c\u653f\u533a\u5212\u56fe",
                "\u7b80\u7b14\u4eba\u7269",
                "\u7248\u753b",
                "\u80cc\u5305",
                "\u7eb8\u7248\u753b",
                "\u5305",
                "\u5176\u4ed6"
            ],
            "selected": {},
            "type": "scroll",
            "show": true,
            "left": "100%",
            "orient": "vertical",
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5
    },
    "title": [
        {
            "text": "ai\u8bc6\u522b\uff0c\u56fe\u50cf\u7c7b\u578b\u5360\u6bd4",
            "padding": 5,
            "itemGap": 10
        }
    ]
};
        chart_90b8a018c5734ffe92858f98909ffa27.setOption(option_90b8a018c5734ffe92858f98909ffa27);
    </script>
        <div class="profile-img"></div>
    </header>
    <!-- .header-->
</div>


<div class="right-col-block blocks">
<section class="intro section-wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="section-title">
                    <h2>分析</h2>
                </div>
            </div>
            <div class="col-md-12">
                <p>
                       卡通动漫人物是排行榜中最常见的图片类型，占据了60%以上的比例。这表明人们对卡通动漫人物的兴趣较高，
                    这可能与卡通动漫作品在娱乐产业中的流行以及人们对卡通角色的喜爱有关。
                    简笔画在排行榜中的占比较低，没有具体的占比信息。这可能表明在大众中简笔画的流行度相对较低，或者该排行榜更倾向于其他类型的图片。
                       其他类型的图片也没有具体的占比信息，但从饼图上看，它们占据了一定的比例。这些其他类型的图片可能包括风景照片、抽象艺术、物品照片等。
                    这表明在排行榜中还存在着其他类型的图片，尽管它们的比例较低。
                        屏幕截图在排行榜中占据较小的比例。这可能意味着该排行榜更多地关注由用户或摄影师创作的图片，
                    而不是来自电脑屏幕的截图。屏幕截图的使用场景可能更多地与技术支持、共享学习等方面有关。
                        工笔画在排行榜中也占据较小的比例。工笔画是中国传统绘画的一种形式，表现着精细、细致的绘画技巧，
                    它在这个排行榜中的占比可能说明在整个排行榜的用户群体中，对于传统艺术形式的兴趣较低。

                </p>

                <p>

                </p>
            </div>
        </div>
    </div>
</section>
<!-- .footer -->
</div>
<!-- .right-col-block -->
</div>
<!-- .columns-block -->
</div>
<!-- #main-wrapper -->

<!-- jquery -->
<script src="{{ url_for('static',filename='js/jquery-2.1.4.min.js') }}"></script>

<!-- Bootstrap -->
<script src="{{ url_for('static',filename='js/bootstrap.min.js') }}"></script>
<script src="{{ url_for('static',filename='js/scripts.js') }}"></script>
</body>
</html>